<template>
  <div class="auto select-overspread" style="margin-left: 25px; border: 1px solid #EEF3F6">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <!-- <p class="bg-info text-center" style="padding: 8px;">分配信息</p> -->
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">卡详细信息</a></li>
        </ul>
        <div class="row" style="margin-top:10px;">
          <label for="f_card_number" class="col-sm-3 control-label">卡号</label>
          <div class="col-sm-3">
            <input  type="number" class="form-control" v-model="model.f_card_number" disabled>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_card_type"  class="col-sm-3 control-label">卡类型</label>
          <div class="col-sm-3" >
              <input  type="txt" class="form-control" v-model="model.f_card_type"  disabled>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_userinfo_id" class="col-sm-3 control-label">用户编号</label>
          <div class="col-sm-3">
            <input  type="number" class="form-control" v-model="model.f_userinfo_id"  disabled>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_user_name" class="col-sm-3 control-label">用户姓名</label>
          <div class="col-sm-3">
            <input  type="txt" class="form-control" v-model="model.f_user_name" disabled>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_allot_name" class="col-sm-3 control-label">发卡人</label>
          <div class="col-sm-3">
            <input  type="txt" class="form-control" v-model="model.f_allot_name"  disabled>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_operator_type" class="col-sm-3 control-label">业务类型</label>
          <div class="col-sm-3">
            <input  type="txt" class="form-control" v-model="model.f_operator_type" disabled>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_operator"  class="col-sm-3 control-label">卡状态</label>
          <div class="col-sm-3" >
            <v-select :value.sync="model.f_card_state"
              v-model="model.f_card_state"
              :options='operates'
              placeholder='请选择'
              v-model="model.f_card_state"
              close-on-select>
            </v-select>
          </div>
        </div>

      </form>
      <div style="text-align:right;margin-top:30px;margin-right:50px;">
        <button class="btn btn-success width-60" @click="confirm()" :disabled='!$v.valid'>确认</button>
        <button class="btn btn-default width-60" @click="clean()">取消</button>
      </div>
    </validator>
  </div>
</template>
<script>
import AppData from '../../../../stores/AppData'
import * as Util from '../../../Util'
export default {
  title: '发卡信息编辑',
  data () {
    return {
      model: {
        f_operator: Util.f.name,
        f_operator_date: Util.toStandardTimeString(),
        f_filiale: Util.f.f_fengongsi,
        f_outlets: Util.f.f_parentname
      }
    }
  },
  props: ['data'],
  watch: {
    'data' (val) {
      this.datatomodel()
    }
  },
  ready () {
    this.datatomodel()
  },
  methods: {
    /*
    更改选择框里面的值
    传进来时转换为数组，
    保存时转换为字符串
    */
    selectChangeString (type) {
      this.model.f_card_state = this.model.f_card_state[0]
    },
    selectChangeArr (type) {
      this.model.f_card_state = [`${this.model.f_card_state}`]
    },
    // 接受数据时转换为本页面的model
    datatomodel () {
      Object.assign(this.$data.model, this.$options.data().model)
      this.model = Object.assign({}, this.model, this.data)
      this.selectChangeArr()
    },
    confirm () {
      this.selectChangeString()
      this.$resetpost('rs/entity/t_carddetail', this.model, {resolveMsg: '更改成功', rejectMsg: null})
      .then(
        (res) => {
          this.$dispatch('detailsave', 'success', res)
        }
      ).catch(
        (error) => {
          this.$dispatch('detailsave', 'error', error)
        }
      )
    },
    cancel () {
      this.$dispatch('detailsave')
    }
  },
  computed: {
    'operates' () {
      return AppData.getParam('票据分配人')
    }
  }
}
</script>
